<template>
  <div>
    
    <van-sidebar v-model="activeKey">
      
  <van-sidebar-item v-for="item ,index in cates" :key="item.id" 
  @click="transmit(item.name)"
  
  :title="item.name" :class='{active:index == activeKey}'/>
  
  </van-sidebar>
    </div>
</template>

<script>
  export default {
     data() {
    return {
      activeKey: 0,
    };
  },
  created(){
    this.transmit("鲜花")
  },
  methods:{
    transmit:function(val){
      this.$parent.catedata(val)
      
    }
  },
    props:['cates']
  }
</script>

<style lang="scss" scoped>
.cate{
  color: black;
  height: 50px;
  text-align: center;
  line-height: 100%;
  width: 100%;
 
}
.van-sidebar-item{
  border-right: 1px solid black;
  padding: 20px 10px;
  
}
.active{
  background: #f5f5f5;
  
 
   border-right: none;
}
</style>